<template>
  <div class="market-robot-main">
    <div class="robot-header">
      <div class="header-left">
        <div class="head-title">
          智能应答
        </div>
        <img class="divider" src="@/assets/images/divider.png" />
        <el-select v-model="value" filterable size="small">
          <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" size="small">
            <div class="select-option-item">
              <span>{{ item.label }}</span>
              <i class="el-icon-circle-close icon-close" v-if="actived != item.value"></i>
            </div>
          </el-option>
          <div class="other-option">
            <a class="link">企业管理</a>
          </div>
        </el-select>
        <div class="gaid-rows">
          <el-button type="primary" size="small" icon="el-icon-plus" v-hasPermi="['robot:add']" >新建方案</el-button>
          <el-input class="search-input" size="small" placeholder="请输入方案" suffix-icon="el-icon-search" />
          <el-select v-model="groupVlaue" size="small" filterable placeholder="请选择">
            <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="head-setting">
        <div class="check-box">
          <el-checkbox v-model="form.checked" />
          <span>首次自动应用</span>
        </div>
        <el-tooltip class="item" effect="dark" placement="top" style="margin-right: 8px;">
          <div slot="content">开启后，首次登录本账号的企微号<br />，登录成功5分钟后会自动应用列表中的<br />所有配置。</div>
          <svg-icon icon-class="iquestion" />
        </el-tooltip>
        <el-button type="warning" size="mini" v-hasPermi="['robot:batchApplication']" @click="dialogVisible = true">批量应用</el-button>
      </div>
    </div>
    <div class="market-robot-wrap">
      <div class="market-robot-left">
        <div class="robot-listcon">
          <div class="robot-planItem" v-for="i in 4" :key="i">
            <div class="name">
              <span class="text">方案1</span>
              <div class="group-button">
                <el-button class="cl-btn" type="text" size="mini" @click.stop="onHandleShowDialog">管理</el-button>
                <el-dropdown>
                  <el-button class="drop-btn" type="text" size="mini" icon="el-icon-more" />
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>重命名</el-dropdown-item>
                    <el-dropdown-item>复制</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="status">
              <span class="planid">ID:1109030</span>
              <span class="anticon activeStatus">
                <svg-icon icon-class="keyword-icon" />
              </span>
              <span class="anticon activeStatus">
                <svg-icon icon-class="image-icon" />
              </span>
              <span class="anticon activeStatus">
                <svg-icon icon-class="message-icon" />
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="market-robot-right">
        <div class="robot-container">
          <div class="control-btn">
            <el-button icon="el-icon-setting" size="small" style="height: 32px;width: 82px;" @click.stop="onHandleShowDialog">管理</el-button>
          </div>
          <el-tabs class="tabs-list" v-model="activeName">
            <el-tab-pane name="first">
              <div slot="label" class="tabs-label">
                <span>基本设置</span>
              </div>
              <div class="tabs-wrap">
                <el-alert :closable="false" type="warning" show-icon>
                  <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                    设置完成后，请点击“保存并应用配置”按钮，才能生效；如需单个企微号配置请前往“<a style="color: #3070ff;">单号配置-智能应答</a>”
                  </div>
                </el-alert>
                <el-form ref="form" :model="form" label-width="100px" class="robot-form" label-position="left">
                  <el-form-item label="分组选择：">
                    <el-select v-model="form.groupVlaue" size="small" filterable placeholder="请选择"
                      style="width: 320px;">
                      <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="应答时间段：">
                    <el-radio-group v-model="form.datetime">
                      <el-radio :label="1"><span style="color: rgba(0,0,0,.65);">每天</span></el-radio>
                      <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">按日期</span></el-radio>
                    </el-radio-group>
                    <div class="flex-rows" v-if="form.datetime === 1">
                      <el-time-picker size="small" style="width: 100px;" v-model="form.startTitme" />
                      <span class="time-divider">-</span>
                      <el-time-picker size="small" style="width: 100px;" v-model="form.endTitme" />
                      <span style="color:#999;">每日 08:00 至 23:59</span>
                    </div>
                    <div class="flex-rows" v-if="form.datetime === 2">
                      <el-date-picker v-model="form.date" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item label="应答延时：" style="width: 100%;">
                    <div class="flex-rows">
                      <div class="row-item">
                        <el-input size="small" v-model="value" style="width: 80px;" />
                        <span>秒</span>
                      </div>
                      <span class="liner">-</span>
                      <div class="row-item">
                        <el-input size="small" v-model="value" style="width: 80px;" />
                        <span>秒</span>
                      </div>
                      <el-button size="small" type="primary" plain @click="setDefaultValue()"
                        style="margin-left: 8px;">设为推荐值</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="回复方案：" prop="pass">
                    <el-radio-group v-model="form.radio">
                      <el-radio :disabled="item.disabled" :label="item.id" v-for="(item, index) in sendObject"
                        :key="index">
                        {{ item.title }}
                        <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
                          <div slot="content" v-html="item.tips"></div>
                          <svg-icon icon-class="question-circle-fill" />
                        </el-tooltip>
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item abel="应答对象：">
                    <div class="control-content">
                      <div class="head">
                        <div class="checkbox">
                          <el-checkbox v-model="customer"><span style="color: #000;">客户</span></el-checkbox>
                          <div class="radio-content">
                            <el-radio-group v-model="form.customer">
                              <el-radio :label="0"><span style="color: #000;">所有客户</span></el-radio>
                              <el-radio :label="1"><span style="color: #000;">筛选客户</span></el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                      </div>
                      <div class="body">
                        <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customer === 0">
                          <svg-icon icon-class="warning-border" /> 选中企微号的所有客户
                        </div>
                        <ConditionForm v-else />
                      </div>
                    </div>
                    <div class="control-content">
                      <div class="head">
                        <div class="checkbox">
                          <el-checkbox v-model="customer"><span style="color: #000;">客户群</span></el-checkbox>
                          <div class="radio-content">
                            <el-radio-group v-model="form.customerGroup">
                              <el-radio :label="0"><span style="color: #000;">所有客户群</span></el-radio>
                              <el-radio :label="1"><span style="color: #000;">筛选客户群</span></el-radio>
                            </el-radio-group>
                          </div>
                        </div>
                      </div>
                      <div class="body">
                        <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customerGroup === 0">
                          <svg-icon icon-class="warning-border" /> 选中企微号的所有客户群
                        </div>
                        <ConditionGroupForm v-else />
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="排除对象：">
                    <el-checkbox-group v-model="form.checks">
                      <div><el-checkbox :label="1"><span
                            style="color: rgba(0,0,0,.65);">白名单用户发的消息不触发应答</span></el-checkbox></div>
                      <div><el-checkbox :label="2"><span
                            style="color: rgba(0,0,0,.65);">系统中在线的其他企微号发的消息不触发应答</span></el-checkbox></div>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <div slot="label" class="tabs-label">
                <el-checkbox :label="2">{{ '' }}</el-checkbox><span style="color: rgba(0,0,0,.65);">关键词应答</span>
              </div>
              <div class="tabs-wrap">
                <el-alert type="warning" show-icon>
                  <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                    设置完成后，请点击右上角“应用配置”按钮，才能生效；如需单个企微号配置或查看具体客户添加详情请前往 “<a style="color: #3070ff;">单号配置</a>”
                  </div>
                </el-alert>
                <el-form ref="form" :model="form" label-width="100px" class="robot-form" label-position="left">
                  <el-form-item label="触发规则：">
                    <el-checkbox-group v-model="form.checks">
                      <el-checkbox :label="1">
                        <span style="color: rgba(0,0,0,.65);">群消息@自己才回复</span>
                      </el-checkbox>
                      <el-checkbox :label="2">
                        <span style="color: rgba(0,0,0,.65);">回复内容带上问题</span>
                      </el-checkbox>
                      <el-checkbox :label="3">
                        <span style="color: rgba(0,0,0,.65);">回复群消息时@对方</span>
                      </el-checkbox>
                      <el-checkbox :label="4">
                        <span style="color: rgba(0,0,0,.65);">
                          自己可触发关键词
                          <el-tooltip style="margin-left: 4px; color: #666" effect="dark" placement="top">
                            <div slot="content">
                              1、自己只能触发精准关键词；<br />
                              2、注意回复问题中不要设置相关关键<br />词，避免循环触发；
                            </div>
                            <svg-icon icon-class="iquestion" />
                          </el-tooltip>
                        </span>
                      </el-checkbox>
                      <el-checkbox :label="5">
                        <span style="color: rgba(0,0,0,.65);">
                          同一对象同一问题<el-input size="small" value="60" style="width: 88px;margin: 0 8px;" />分钟内不重复回复
                        </span>
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <div class="row-line"></div>
                  <el-form-item label="引导语：">
                    <div>回复序号查看以下问题 <a style="color: #3070ff;" @click="isShowIndicate = true">修改</a></div>
                    <div style="color: rgba(0, 0, 0, 0.45);">同一关键词触发多个问题询问选择引导语：<a style="color: #3070ff;">示例</a></div>
                  </el-form-item>
                  <div class="row-line"></div>
                </el-form>
                <div class="table-content">
                  <div class="table-filter">
                    <div class="gap-column">
                      <el-button icon="el-icon-plus" size="small" plain type="primary" @click="onNavigationTo('/market/robot/add')">新增问题</el-button>
                      <el-input class="search-input" size="small" placeholder="输入关键词进行搜索" suffix-icon="el-icon-search"
                        style="width: 240px;" />
                    </div>
                    <div class="gap-column">
                      <el-button size="small" plain type="primary" disabled>全选</el-button>
                      <el-button size="small" plain type="primary" disabled>批量启用</el-button>
                      <el-button size="small" plain type="primary" disabled>批量停用</el-button>
                      <el-button size="small" plain type="primary" disabled>批量删除</el-button>
                    </div>
                  </div>
                  <div class="table-body">
                    <el-table ref="hookTable" :data="dataSource" header-cell-class-name="table-header-class"
                    header-row-class-name="table-header-row-class" row-class-name="table-row-class" style="width: 100%">
                    <el-table-column property="mobile" label="ID">
                    </el-table-column>
                    <el-table-column property="name" label="问题库/触发关键词">
                    </el-table-column>
                    <el-table-column property="address" label="答案">
                    </el-table-column>
                    <el-table-column property="address" label="状态">
                    </el-table-column>
                    <el-table-column property="address" label="优先级">
                    </el-table-column>
                    <el-table-column property="option" label="操作">
                    </el-table-column>
                    <template slot="empty">
                      <TableEmpty />
                    </template>
                  </el-table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane name="third">
              <div slot="label" class="tabs-label">
                <el-checkbox :label="3">{{ '' }}</el-checkbox><span style="color: rgba(0,0,0,.65);">图文应答</span>
              </div>
              <div class="tabs-wrap">
                <el-alert type="warning" show-icon>
                  <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                    设置完成后，请点击右上角“应用配置”按钮，才能生效；如需单个企微号配置或查看具体客户添加详情请前往 “<a style="color: #3070ff;">单号配置</a>”
                  </div>
                </el-alert>
                <el-form ref="form" :model="form" label-width="100px" class="robot-form" label-position="left">
                  <el-form-item label="触发规则：">
                    <el-checkbox-group v-model="form.checks">
                      <div>
                        <el-checkbox :label="1">
                          <span style="color: rgba(0,0,0,.65);">收到<el-input size="small" value="3" style="margin: 0 8px;width: 88px"/>张图片后合并回复</span>
                        </el-checkbox>
                      </div>
                      <div>
                        <el-checkbox :label="1">
                          <span style="color: rgba(0,0,0,.65);">汇总<el-input size="small" value="60" style="margin: 0 8px;width: 88px;"/>
                            秒内的图片消息合并回复 <span style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">(两种合并回复都勾选，按优先满足的条件触发)</span>
                          </span>
                        </el-checkbox>
                      </div>
                      <div>
                        <el-checkbox :label="1">
                          <span style="color: rgba(0,0,0,.65);">
                            <span style="color: rgba(0,0,0,.65);">同一对象回复后<el-input size="small" value="60" style="margin: 0 8px;width: 88px"/>分钟内忽略其发来的图片</span>
                          </span>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="发送内容：">
                    <material-content ref="material" />
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <div slot="label" class="tabs-label">
                <el-checkbox :label="4">{{ '' }}</el-checkbox><span style="color: rgba(0,0,0,.65);">默认应答</span>
              </div>
              <div class="tabs-wrap">
                <el-alert type="warning" show-icon>
                  <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                    设置完成后，请点击右上角“应用配置”按钮，才能生效；如需单个企微号配置或查看具体客户添加详情请前往 “<a style="color: #3070ff;">单号配置</a>”
                  </div>
                </el-alert>
                <el-form ref="form" :model="form" label-width="100px" class="robot-form" label-position="left">
                  <el-form-item label="触发规则：">
                    <el-checkbox-group v-model="form.checks">
                      <el-checkbox :label="1">
                        <span style="color: rgba(0,0,0,.65);">群消息@自己才回复</span>
                      </el-checkbox>
                      <el-checkbox :label="3">
                        <span style="color: rgba(0,0,0,.65);">回复群消息时@对方</span>
                      </el-checkbox>
                      <el-checkbox :label="5">
                        <span style="color: rgba(0,0,0,.65);">
                          同一对象同一问题<el-input size="small" value="60" style="width: 88px;margin: 0 8px;" />分钟内不重复回复
                        </span>
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="延迟设置：">
                      <span style="color: rgba(0,0,0,.65);">触发默认应答后延迟<el-input size="small" value="60" style="margin: 0 8px;width: 88px;"/>
                        秒发送回复内容 <span style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">（在延时时间内，已经有消息回复，默认应答不会触发）</span>
                      </span>
                  </el-form-item>
                  <el-form-item label="发送内容：">
                    <material-content ref="material" />
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="footer-btns">
          <el-button size="small" type="primary" v-hasPermi="['robot:save']">保存配置</el-button>
          <el-button size="small" type="warning" v-hasPermi="['robot:application']">保存并应用配置</el-button>
        </div>
      </div>
    </div>
    <RobotControlDialog :visible='isShowDialog' @handCloseDialog="onHandCloseControlDialog" />
    <IndicateSettingDialog :visible="isShowIndicate" @handCloseDialog="onHandCloseShowIndDialog" />
  </div>
</template>
<script>
import RobotControlDialog from '../components/robotControlDialog'
import ConditionForm from '../components/conditionForm'
import MaterialContent from "@/components/MaterialContent";
import ConditionGroupForm from '../components/conditionGroupForm'
import IndicateSettingDialog from '../components/indicateSettingDialog'
export default {
  data() {
    return {
      actived: 0,
      value: '0',
      isShowDialog: false,
      isShowIndicate: false,
      groupVlaue: '',
      customer: 0,
      cities: [{
        value: '0',
        label: '志新'
      }, {
        value: '1',
        label: '锐行'
      }],
      groupList: [
        {
          value: '1',
          label: '默认分组'
        },
        {
          value: '2',
          label: '11111111'
        }
      ],
      form: {
        groupVlaue: '',
        datetime: 1,
        checks: [],
        customer: 0,
        customerGroup: 0,
      },
      sendObject: [
        { id: 1, title: '按客户/客户群回复', disabled: true, },
        { id: 2, title: '按条件设置发送', disabled: false, tips: '新符合条件的客户/客户群自动加入' }
      ],
      activeName: 'second',
      dataSource: []
    }
  },
  components: {
    ConditionForm,
    MaterialContent,
    ConditionGroupForm,
    RobotControlDialog,
    IndicateSettingDialog
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onHandleShowDialog() {
      this.isShowDialog = true
    },
    onHandCloseControlDialog() {
      this.isShowDialog = false
    },
    onHandCloseShowIndDialog() {
      this.isShowIndicate = false
    }
  },
}
</script>
<style lang="scss" scoped>
.market-robot-main {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;

  .robot-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .header-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .head-title {
        font-size: 14px;
        line-height: 22px;
        height: 48px;
        background: #fff;
        font-weight: 700;
        border-bottom: 1px solid #e9e9e9;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .divider {
        margin: 0 20px;
        width: 1px;
        height: 16px;
      }

      .gaid-rows {
        margin-left: 10px;
        display: grid;
        align-items: center;
        grid-template-columns: 110px 170px 120px;
        column-gap: 8px;
      }
    }

    .head-setting {
      display: flex;
      align-items: center;

      .check-box {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;

        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }

  .market-robot-wrap {
    display: flex;
    height: 100%;

    .market-robot-left {
      width: 384px;
      height: 100%;
      overflow: hidden;

      .robot-listcon {
        height: 100%;
        overflow: scroll;
        padding: 0 12px;
        overflow-x: hidden;

        .robot-planItem {
          width: 360px;
          padding: 12px;
          margin: 6px 0;
          line-height: 22px;
          background: #fff;
          border: 1px solid #e9e9e9;
          border-radius: 4px;
          cursor: pointer;

          &.selected {
            background: #ebf2ff;
            border: 1px solid #3070ff;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2)
          }

          .name {
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            display: flex;
            justify-content: space-between;

            .group-button {
              display: flex;
              align-items: center;
              height: 24px;
              box-shadow: unset;
              cursor: pointer;
              transition: all .3s;
              white-space: nowrap;
              outline: none;

              .cl-btn {
                border-radius: 0;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                height: 24px;
                padding: 0 7px;
                font-size: 14px;
                border: 1px solid #e9e9e9;
              }

              .drop-btn {
                width: 24px;
                height: 24px;
                padding: 0 7px;
                padding-right: 0;
                padding-left: 0;
                border-radius: 0;
                margin-left: -1px;
                border: 1px solid #e9e9e9;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
              }

              ::v-deep .el-button--text {
                background: #fff;
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .65);
              }
            }
          }

          .status {
            display: flex;
            align-items: center;

            .planid {
              font-size: 12px;
              color: rgba(0, 0, 0, .45);
              margin-right: 8px;
            }

            .anticon {
              font-size: 14px;
              margin-right: 6px;
              color: rgba(0, 0, 0, .35);

              &.activeStatus {
                color: #2f54eb;
              }
            }
          }
        }
      }
    }

    .market-robot-right {
      position: relative;
      min-width: 640px;
      flex: 1 0;
      height: 100%;
      background-color: #fff;

      .robot-container {
        position: relative;
        min-height: calc(100% - 64px);
        .control-btn {
          position: absolute;
          right: 20px;
          top: 2px;
          z-index: 1;
        }
      }

      .tabs-list {
        ::v-deep .el-tabs__nav-scroll {
          padding: 0 20px;
        }

        .tabs-wrap {
          flex: 1 1;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          border-left: 1px solid #e9e9e9;
          padding: 0 20px 20px;
          background-color: #fff;

          .robot-form {
            margin-top: 20px;

            .flex-rows {
              display: flex;
              align-items: center;
              gap: 8px;

              .row-item {
                span {
                  margin-left: 8px;
                }
              }
            }

            .row-line {
              height: 1px;
              background: rgb(233, 233, 233);
              width: 100%;
              margin-bottom: 20px;
            }
          }

          .table-content {
            .table-filter {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .gap-column {
                display: flex;
                align-items: center;
                gap: 8px;
              }
            }
            .table-body {
              margin-top: 16px;
            }
          }

          .control-content {
            width: calc(100% - 150px);
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5715;
            margin-top: 20px;

            .head {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 46px;
              background: #f5f6f7;
              border-radius: 2px;
              border: 1px solid #e9e9e9;
              padding: 0 16px;

              .checkbox {
                display: flex;
                align-items: center;

                .radio-content {
                  margin-left: 24px;
                  padding: 4px 16px;
                  border-radius: 16px;
                  background-color: #fff;
                  border: 1px solid #e9e9e9;
                }
              }
            }

            .body {
              padding: 16px;
              line-height: 22px;
              border: 1px solid #e9e9e9;
              border-top: none;

              .form-card {
                .header {
                  height: 48px;
                  padding: 0 12px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  background: #fff;
                  border: 1px solid #f0f0f0;
                  border-radius: 4px 4px 0 0;

                  .flex-btns {
                    display: grid;
                    column-gap: 8px;
                    grid-template-columns: 22px 22px;

                    .ic-btn {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border: 2px solid #3070ff;
                      font-weight: bold;
                      height: 22px;
                      color: #3070ff;
                    }
                  }
                }

                .card-wrap {
                  padding: 16px;
                  background: #f9f9f9;
                }
              }
            }
          }
        }
      }

      .footer-btns {
        background: #fff;
        text-align: center;
        padding: 12px 16px;
        border-top: 1px solid #e9e9e9;
      }
    }
  }
}

.robot-header.el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
  margin: 0;
  border-radius: 4px;
}

.robot-header.el-input__inner {
  border: 1px solid #e9e9e9;
  background: #eff3ff !important;
  border-radius: 4px;
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  color: rgba(0, 0, 0, .65);
  min-width: 200px;
  font-size: 14px;
  font-variant: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
  line-height: 26px;
}

.robot-header.el-select .el-input .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-scrollbar .select-option-item {
  height: 34px;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-scrollbar .select-option-item:hover .icon-close {
  display: block;
}

.el-scrollbar .select-option-item .icon-close {
  display: none;
}

.el-scrollbar .other-option {
  padding: 0 8px;
  color: #2f54eb;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9e9e9;
}

.el-scrollbar .other-option>.link {
  font-size: 14px;
}

.dropdown-menu-body {
  padding: 8px 12px;
}

.dropdown-menu-body .dropdown-menu-item {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding: 12px;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}

.dropdown-menu-body .dropdown-menu-item:hover {
  border: 1px solid #3070ff;
}

.dropdown-menu-body .dropdown-menu-item .menu-title {
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
  margin-bottom: 2px;
}

.dropdown-menu-body .dropdown-menu-item:first-child {
  margin-bottom: 12px;
}
</style>
